$(document).tooltip();

$(function() {
	var tabs = $( "#share_tabs" ).tabs();
	tabs.find( ".ui-tabs-nav" ).sortable({
	axis: "x",
	stop: function() {
		tabs.tabs( "refresh" );
	}
	});
	console.log(localStorage.getItem("username"));
	console.log(localStorage.getItem("ID"));
	if(localStorage.getItem("username") != null || localStorage.getItem("ID") != null){
		$('#login-out').removeClass('its-icon-user').addClass('its-icon-record');
		$('#login-out').attr('title', 'BẠN MUỐN ĐĂNG XUẤT');
		$('#login-out').attr('href', '#');
	}
});

$(document).ready(function(){
	
	// new itsMenu( document.getElementById( 'its-menu' ) );

	$('#problem_share input:radio').addClass('input_hidden');
	$('#problem_share label').click(function() {
	    $(this).addClass('selected').siblings().removeClass('selected');
	});

	$('#location_share input:radio').addClass('input_hidden');
	$('#location_share label').click(function() {
	    $(this).addClass('selected').siblings().removeClass('selected');
	});

	$('#tab-open').click(function() {
	    if(localStorage.getItem("username") == null && localStorage.getItem("ID") == null){
	    	if (confirm("Để sử dụng chức năng này bạn cần phải đăng nhập tài khoản.\n Bạn có muốn đăng nhập hay không?")){
				window.location.href = "http://traffic.hcmut.edu.vn/webapp/register.html";
	    	}else{
	    		return false;
	    	}		
	    }
	});

	$('#warning_box input:radio').addClass('input_hidden');
	$('#warning_box label').click(function() {
	    if($(this).hasClass('selected') == true) $(this).removeClass('selected');
	    else $(this).addClass('selected');
	});

	$('#location_box input:radio').addClass('input_hidden');
	$('#location_box label').click(function() {
	    if($(this).hasClass('selected') == true) $(this).removeClass('selected');
	    else $(this).addClass('selected');
	});


	$('#isShow').click(function(){
		if($(this).prop('checked')) {
    		locationMarkerLayer.addTo(map);
		} else {
    		map.removeLayer(locationMarkerLayer);
    		map.removeLayer(markerLocation);
    		markerLocation = null;
		}
	});

	$('#show_location_btn').click(
	    function(){
	    	backLiveMode();
	    	var radius = $('select[name="distance"] option:selected').val();
	    	var type = "";
	    	if($('label[for="coffee_store_s"]').hasClass('selected')) type += $('#coffee_store_s').val();
	    	if($('label[for="gas_station_s"]').hasClass('selected')) type += $('#gas_station_s').val();
	    	if($('label[for="mall_s"]').hasClass('selected')) type += $('#mall_s').val();
	    	if($('label[for="repair_car_s"]').hasClass('selected')) type += $('#repair_car_s').val();
	    	if($('label[for="parking_lot_s"]').hasClass('selected')) type += $('#parking_lot_s').val();
	    	if($('label[for="hospital_s"]').hasClass('selected')) type += $('#hospital_s').val();
	    	var latlng = [map.getCenter().lat,map.getCenter().lng];
	        $('div').remove('#information-box-location');	    	
	        showLocation(latlng, type, radius);
	       	$('#isShow').prop( "checked", true );
	});

	$('#isShowProblem').click(function(){
		if($(this).prop('checked')) {
    		problemMarkerLayer.addTo(map);
		} else {
    		map.removeLayer(problemMarkerLayer);
    		map.removeLayer(markerLocation);
    		markerLocation = null;
		}
	});

	$('#show_problem_btn').click(
	    function(){
	    	backLiveMode();
	        $('div').remove('#information-box');	    
	    	var type = 0;
	        showProblem(type);
	       	$('#isShowProblem').prop( "checked", true );
	});


	$("#open-display").click(function(){
		$("#display-function").show("fast");
		return false;
	});

	$("#open-warning").click(function(){
		$("#warning-function").show("fast");
		return false;
	});

	$("#open-route").click(function(){
		$("#route-function").show("fast");
		return false;
	});

	$("#open-search").click(function(){
		$("#location-function").show("fast");
		return false;
	});

	function onClick(e){
		if(markerShare == null || markerShare.length == 0){
			markerShare = L.marker(e.latlng,{
				contextmenu: true,
				contextmenuItems: [{
				  text: 'Vị trí bạn muốn chia sẻ',
				  index: 0
				}, {
				  separator: true,
				  index: 1
				}], draggable:true}).addTo(map);
		}else{
			markerShare.setLatLng(e.latlng);
		}
	}

	$("#open-share").click(function(){
		$("#share-function").show("fast");
		map.on('click', onClick);
		return false;
	});

	$("a.close").click(function(){
		$("#display-function").hide("fast");
		$("#warning-function").hide("fast");
		$("#route-function").hide("fast");
		$("#location-function").hide("fast");
		$("#share-function").hide("fast");
		if(markerShare != null){
			map.removeLayer(markerShare);
			markerShare = null;
		}
		if(markerLocation != null){
			map.removeLayer(markerLocation);
	    	markerLocation = null;
		}
		map.off('click', onClick);		
		return false;
	});

	$("a.close-card").click(function(){
		$("div.cards-traffic-control").hide("fast");
		return false;
	});

	$("#warning").click(function() {
		if ($('#warning a').hasClass('warning_actived') == true ){
			$('#warning a').removeClass('warning_actived');
			$('#warning span').html('OFF');
			flagWarning = 0;
			clearLayer(warningLayer);
		}				
		else {
			$('#warning a').addClass('warning_actived');
			$('#warning span').html('ON');
			flagWarning = 1;
			$('#live').prop('checked',true);
			$("div.cards-traffic-control").hide("fast");
			showLiveTrafficInfo();
		}
	});

	$('#login-out').click(function(){
		if(localStorage.getItem("username") != null || localStorage.getItem("ID") != null){
			if (confirm("Bạn thực sự muốn đăng xuất")){
				localStorage.removeItem("username");
				localStorage.removeItem("ID");
	      		$('#login-out').removeClass('its-icon-record').addClass('its-icon-user');
				$('#login-out').attr('title', 'ĐĂNG NHẬP');
				$('#login-out').attr('href', 'register.html');
	    	}else{
	    		return false;
	    	}		
		}
		
	});

	$("div.banner-note").click(function(){
		$(".cards-traffic-control").show("fast");
		return false;
	});

	$('input:radio[name="traffic-mode"]').change(
	    function(){
	        if ($(this).val() == 'pastTraffic') {
	            $(".day-time-adjust").show("fast");
	            flagPast = 1;
	            clearLayer(warningLayer);
				showPastTrafficInfo();
	        }
	        else {
	            $(".day-time-adjust").hide("fast");
	            flagPast = 0;
	            showLiveTrafficInfo();
	        }
	});	

	$('#share_problem_submit').click(function() {		
		if(markerShare != null && markerShare.length != 0){
			var type;
			switch($('input:radio[name="problem_s"]:checked').val()){
				case "b": 	{type = "broken_light"; $('input:radio[name="problem_s"][value="b"]').prop('checked', false);}; break;
				case "a": 	{type = "accident"; $('input:radio[name="problem_s"][value="a"]').prop('checked', false);} break;
				case "f": 	{type = "flood"; $('input:radio[name="problem_s"][value="f"]').prop('checked', false);} break;
				case "c": 	{type = "construction"; $('input:radio[name="problem_s"][value="c"]').prop('checked', false);} break;
				case "w": 	{type = "jam"; $('input:radio[name="problem_s"][value="w"]').prop('checked', false);} break;
				case "p": 	{type = "police"; $('input:radio[name="problem_s"][value="p"]').prop('checked', false);} break;
			}
			if(type != null || type != undefined){
				shareInfo([markerShare.getLatLng().lat, markerShare.getLatLng().lng], type);
				$('#problem_share label').removeClass('selected');
				$('#success-share-problem').text("Bạn đã chia sẻ thành công");
				map.removeLayer(markerShare);
				markerShare = null;
				map.on('click', onClick);
			}
			else{
				alert("Bạn phải chọn loại tình huống giao thông bạn muốn chia sẻ.");
			}						
		}else{
			alert("Bạn phải chọn một vị trí trên bản đồ.\n\n Hãy click chuột vào bản đồ để đánh dấu.");
		}		

		$('#email_share').val("");
		$('#desc_problem').val("");

	});

	$('#share_location_submit').click(function() {
		if(localStorage.getItem("username") == null && localStorage.getItem("ID") == null){
	    	if (confirm("Để sử dụng chức năng này bạn cần phải đăng nhập tài khoản.\n Bạn có muốn đăng nhập hay không?")){
				window.location.href = "http://traffic.hcmut.edu.vn/webapp/register.html";
	    	}else{
	    		return false;
	    	}		
	    }else{
	    	if(markerShare != null && markerShare.length != 0){
				var name = $('#name_location').val(),
					street = $('#street_location').val(),
					ward = $('#ward_location').val(),
					disc  = $('#dist_location').val();
				if(name == "" || street == "" || ward == "" || disc == "") {
					$('#input-error').text("Bạn phải nhập đầy đủ những thông tin yêu cầu");
				}	
				else{
					var type;
					switch($('input:radio[name="location_s"]:checked').val()){
						case "c": 	{type = "1"; $('input:radio[name="location_s"][value="c"]').prop('checked', false);}; break;
						case "g": 	{type = "2"; $('input:radio[name="location_s"][value="g"]').prop('checked', false);} break;
						case "m": 	{type = "3"; $('input:radio[name="location_s"][value="m"]').prop('checked', false);} break;
						case "r": 	{type = "4"; $('input:radio[name="location_s"][value="r"]').prop('checked', false);} break;
						case "p": 	{type = "5"; $('input:radio[name="location_s"][value="p"]').prop('checked', false);} break;
						case "h": 	{type = "6"; $('input:radio[name="location_s"][value="h"]').prop('checked', false);} break;
					}
					if(type != null || type != undefined){
						shareLocation([markerShare.getLatLng().lat, markerShare.getLatLng().lng], type, name, street, ward, disc);
						$('#location_share label').removeClass('selected');
						name = $('#name_location').val("");
						street = $('#street_location').val("");
						ward = $('#ward_location').val("");
						disc  = $('#dist_location').val("");				
						map.removeLayer(markerShare);
						markerShare = null;
						map.on('click', onClick);			
					}else{
						alert("Bạn phải chọn loại địa điểm bạn muốn chia sẻ.");
					}
					
				}						
			}else{
				alert("Bạn phải chọn một vị trí trên bản đồ.\n\n Hãy click chuột vào bản đồ để đánh dấu.");
			}

	    }

	});

	$('input:radio[name="problem_s"]').change(
	    function(){
	    	if(markerShare != null && markerShare.length != 0){
		        switch($(this).val()){
		        	case "b": 	markerShare.setIcon(broken_light); break;
					case "a": 	markerShare.setIcon(accident); break;
					case "f": 	markerShare.setIcon(flood); break;
					case "c": 	markerShare.setIcon(construction); break;
					case "p": 	markerShare.setIcon(police); break;
					case "w": 	markerShare.setIcon(warning); break;
		        }
	    	}
	    	$('#success-share-problem').text("");
	});

	$('input:radio[name="location_s"]').change(
	    function(){
	    	if(markerShare != null && markerShare.length != 0){
		        switch($(this).val()){
		        	case "g": 	markerShare.setIcon(gas_station); break;
					case "r": 	markerShare.setIcon(repair_car); break;
					case "p": 	markerShare.setIcon(parking_lot); break;
					case "c": 	markerShare.setIcon(coffee); break;
					case "h": 	markerShare.setIcon(hospital); break;
					case "m": 	markerShare.setIcon(store); break;
		        }
	    	}
	    	$('#success-share-location').text("");
	});

	$('input[type="range"]').change(function(){
		var weekday=["Chủ Nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy"];
		var timepast = $("input[type=range]").val();
		daytimePast[3] = parseInt(timepast/60);
		daytimePast[4] = timepast%60;
		var d = new Date();
		d.setDate(daytimePast[0]);
		var daytime = document.getElementById("day-time-value");
		var date_display = "";
		if (daytimePast[4] != 0) date_display += weekday[d.getDay()] + ", " + daytimePast[3] + ":30, ";
		else date_display += weekday[d.getDay()] + ", " + daytimePast[3] + ":00, ";
		if(Number(daytimePast[0]) < 10) daytimePast[0] = "0" + Number(daytimePast[0]);
		if(Number(daytimePast[1]) < 10) daytimePast[1] = "0" + Number(daytimePast[1]);
		date_display += daytimePast[0] + "/" + daytimePast[1] + "/" + daytimePast[2];
		daytime.innerHTML = date_display;
		showPastTrafficInfo();

	});

	$(".day").delegate('li > a', "click", function() {
		$('li > a').removeClass('actived');
		$(this).addClass('actived');
		var day = parseInt($(this).attr("dayindex").substring(0));
		daytimePast = updateDate(day);
		showPastTrafficInfo();
	});


function updateDate(dayclick){
	var weekday=["Chủ Nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy"];
	var daytimeRequest = [];
	var myDate = new Date();
	if(dayclick <= myDate.getDay()) myDate.setDate(myDate.getDate()-(myDate.getDay() - dayclick));
	else myDate.setDate(myDate.getDate() - 7 + (dayclick-myDate.getDay()));
	var timepast = $("input[type=range]").val();
	var hour = parseInt(timepast/60),
		min = timepast%60;
	var daytime = document.getElementById("day-time-value");
	var date_display = "";
	if (min != 0) date_display += weekday[myDate.getDay()] + ", " + hour + ":30, ";
	else date_display += weekday[myDate.getDay()] + ", " + hour + ":00, ";
	daytimeRequest.push(myDate.getDate());
	daytimeRequest.push(myDate.getMonth()+1);
	daytimeRequest.push(myDate.getFullYear());
	daytimeRequest.push(hour);
	daytimeRequest.push(min);
	if(daytimeRequest[0] < 10) daytimeRequest[0] = "0" + daytimeRequest[0];
	if(daytimeRequest[1] < 10) daytimeRequest[1] = "0" + daytimeRequest[1];
	date_display += daytimeRequest[0] + "/" + daytimeRequest[1] + "/" + daytimeRequest[2];
	daytime.innerHTML = date_display;
	
	return daytimeRequest;		
	}
});


$(function() {
	var normalize = function( term ) {
		var ret = "";
		for ( var i = 0; i < term.length; i++ ) {
		ret += accentMap[ term.charAt(i) ] || term.charAt(i);
		}
		return ret;
	};
	var names = [];
	for (var i = 0; i < hptraffics.length; i++ ) {
		names[i] = hptraffics[i].desc;
	}

	$( "#hotpoint" ).autocomplete({
		source: function( request, response ) {
			var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
			response( $.grep( hptraffics, function( value ) {
			value.desc = value.desc.label || value.desc.value || value.desc;
			return matcher.test( value.desc ) || matcher.test( normalize( value.desc ) );
			}) );
		},
		select: function( event, ui ) {
			$( "#hotpoint" ).val( ui.item.desc );
			map.setView(new L.LatLng(ui.item.lat, ui.item.lon), 18);
			var pin = L.marker([ui.item.lat, ui.item.lon],{
							contextmenu: true,
							contextmenuItems: [{
							  text: 'Vị trí điểm nóng giao thông',
							  index: 0
							}, {
							  separator: true,
							  index: 1
							}], icon: pushPin}).addTo(map);
			pin.bindPopup(ui.item.desc).openPopup();
			return false;
		}
	})
	.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	  return $( "<li>" )
	    .append( "<a>" + item.desc + "</a>" )
	    .appendTo( ul );
	};

	$( "#name-street" ).autocomplete({
		source: function( request, response ) {
			var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
			response( $.grep( street, function( value ) {
			value.name = value.name.label || value.name.value || value.name;
			return matcher.test( value.name ) || matcher.test( normalize( value.name ) );
			}) );
		},
		select: function( event, ui ) {
			$( "#name-street" ).val( ui.item.name );
			map.setView(new L.LatLng(ui.item.lat, ui.item.lng), ui.item.zoom);				
			return false;
		}
	})
	.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	  return $( "<li>" )
	    .append( "<a>" + item.name + "</a>" )
	    .appendTo( ul );
	};

	$( "#name-district" ).autocomplete({
		source: function( request, response ) {
			var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
			response( $.grep( Disc, function( value ) {
			value.name = value.name.label || value.name.value || value.name;
			return matcher.test( value.name ) || matcher.test( normalize( value.name ) );
			}) );
		},
		select: function( event, ui ) {
			$( "#name-district" ).val( ui.item.name );
			map.setView(new L.LatLng(ui.item.lat, ui.item.lon), ui.item.zoom);
			BoundDistrict(ui.item.ID, ui.item.name);				
			return false;
		}
	})
	.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	  return $( "<li>" )
	    .append( "<a>" + item.name + "</a>" )
	    .appendTo( ul );
	};    
});		